import React, { Component } from 'react'
import ComponentHead from '../../components/componenthead/componenthead'
import Myswiper from '../../components/myswiper/myswiper'
import {baseUrl,detail} from '../../api/base'
import qs from 'querystring'
import Mytabs from '../../components/mytabs/mytabs'
import './detail.less'
import Detailspj from './detailspj/detailspj'
import {connect} from 'react-redux'
class Detail extends Component {
    state={
        info:{},
        key:'',
        issc:false,
        scobj:{}
    }
    componentDidMount(){
        //获取收藏状态
        let issc = localStorage.getItem('yijusc');
        if(issc){
            issc =JSON.parse(issc)

            console.log(issc)
            if(issc[this.props.match.params.id]){
                this.setState({
                    issc:true,
                    scobj:issc
                })
            }else{
                this.setState({
                    scobj:issc
                })
            }
        }else{
            console.log('没有收藏数据')
        }
        fetch(baseUrl+detail,{
            method:'post',
            headers:{
                "content-type":"application/x-www-form-urlencoded"
            },
            body:qs.stringify(this.props.match.params)
        }).then(res=>res.json())
        .then(data=>{
            console.log(data)
            this.setState({
                info:data
            })
        })
    }
    getkey=(key)=>{
        console.log(key)
        this.setState({
            key
        })
    }
    sc=(e)=>{
        e.preventDefault()
        console.log('收藏'+this.props.user)
        if(this.props.user){
            console.log('已经登陆，可以进行收藏')
            if(this.state.issc){
                //已经收藏，进行取消
                 delete this.state.scobj[this.props.match.params.id]
                localStorage.setItem('yijusc',JSON.stringify(this.state.scobj))
                  //修改收藏状态
                  this.setState({
                    issc:false
                })
            }else{
                console.log(this.state.scobj)
                //没有收藏，进行 收藏
                this.state.scobj[this.props.match.params.id]=true;
                localStorage.setItem('yijusc',JSON.stringify(this.state.scobj))
                //修改收藏状态
                this.setState({
                    issc:true
                })
            }
        }else{
            console.log('未登录，请先进行登陆，再收藏')
            this.props.history.push('/login')
        }
    }
    gm=(e)=>{
        e.preventDefault()
        console.log('购买')
    }
    render() {
        return (
            <div className='details'>
                {/* 头部 */}
                <ComponentHead title='详情页' history={this.props.history}/>
                {/* 轮播图 */}
                {this.state.info.imgs?<Myswiper imgs={this.state.info.imgs}/>:'数据正在请求中'}
                {/* 标签页 */}
                <Mytabs defaultActiveKey='1' onChange={this.getkey}>
                    <div tab='房屋信息' key='1'>
                        {/* 房屋信息的内容 */}
                        {this.state.info.title
                        ?
                        <div>
                            <div className='houseInfo'>
                                <h1>{this.state.info.title}</h1>
                                <div className='price'>
                                    <div>
                                        <p className='cred'>
                                            {this.state.info.price}/月
                                        </p>
                                        <p className='lgrey'>租金</p>
                                    </div>
                                    <div>
                                        <p className='cred'>
                                            {this.state.info.info.type}
                                        </p>
                                        <p className='lgrey'>房型</p>
                                    </div>
                                    <div>
                                        <p className='cred'>
                                            {this.state.info.houseType}
                                        </p>
                                        <p className='lgrey'>面积</p>
                                    </div>
                                </div>
                                <div className='baseinfo'>
                                    <div className='baseinfo-item'>
                                        楼层：{this.state.info.info.level}
                                    </div>
                                    <div className='baseinfo-item'>
                                        装修：{this.state.info.info.style}
                                    </div>
                                    <div className='baseinfo-item'>
                                        类型：{this.state.info.info.type}
                                    </div>
                                    <div className='baseinfo-item'>
                                        朝向：{this.state.info.info.orientation}
                                    </div>
                                    <div className='baseinfo-item'>
                                        年代：{this.state.info.info.years}
                                    </div>
                                </div>
                            </div>
                            <div className='buttons'>
                                <a 
                                    className='btn btn-left'
                                    onClick={this.sc}
                                    href='#'
                                >
                                    {
                                        this.state.issc
                                        ?
                                        '已收藏'
                                        :
                                        '收藏'
                                    }
                                    
                                </a>
                                <a 
                                    className='btn'
                                    onClick={this.gm}
                                    href='#'
                                >
                                    购买
                                </a>
                            </div>
                        </div>
                        :
                        <div>
                            数据加载中
                        </div>
                        }
                        
                    </div>
                    <div tab='房屋评价' key='2'>
                        {
                            this.state.key==='2'
                            ?
                            <Detailspj id={this.props.match.params.id}/>
                            :
                            ''
                        }
                        
                    </div>
                    
                </Mytabs>
            </div>
        )
    }
}
function mapStateToProps(state){
    return{
        user:state.user
    }
}
export default connect(mapStateToProps)(Detail)